<template>
  <div>
    <!-- <BreadCrumb /> -->
    <!-- <competition-nav /> -->
    <!-- 主要区域 -->
    <div class="major-areas">
      <div class="jx-content" id="scrollcontent">
        <div class="searh-select fl">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <div class="search-button" @click="searchByType">搜索</div>
        </div>
        <div class="btn-group fr">
          <el-form :inline="true">
            <el-form-item>
              <div>任务满分：<span>{{score}}</span>分</div>
            </el-form-item>
          </el-form>
        </div>
        <!-- 任务列表 -->
        <el-table class="chapter-info-table" :data="tableData" style="width: 100%" tooltip-effect="dark">
          <el-table-column prop="matchApplyNumber" label="参赛选手/小组"></el-table-column>
          <el-table-column prop="statusValue" label="状态"></el-table-column>
          <el-table-column prop="systemScore" label="判定得分">
            <template slot-scope="scope">
              <div>
                {{scope.row.systemScore!=undefined?scope.row.systemScore:'-'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="manualScore" label="手动得分">
            <template slot-scope="scope">
              <div>
                {{scope.row.manualScore!=undefined?scope.row.manualScore:'-'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sumScore" label="任务总得分">
            <template slot-scope="scope">
              <div>
                {{scope.row.sumScore!=undefined?scope.row.sumScore:'-'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="Approval(scope.row)">查看报告</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
import competitionNav from '@/views/competitionManagement/components/competitionNav.vue'
import {
  getApprovalPlayerList,
  getCourseChatperTask,
} from '@/api/competitionPlatform'

export default {
  name: 'CompetitionApproval',
  components: {
    BreadCrumb,
    competitionNav,
  },
  data() {
    return {
      // 任务id
      taskId: '',
      //课程id
      courseId: '',
      //任务状态
      state: [
        { value: '', label: '全部' },
        { value: 1, label: '已评价' },
        { value: 2, label: '未评价' },
        { value: 3, label: '未提交' },
      ],
      //下拉选框选中的值 //报告状态 1：已评价 2：已提交(未评价) 3：未提交
      value: '',
      // 任务列表
      tableData: [],
      // 任务分数
      score: '',
    }
  },
  created() {
    // 获取课程ID
    this.courseId = this.$localstorage.getLocalStorage('setCourseId')
    // 任务ID
    this.taskId = this.$route.query.taskId
    //获取选手列表
    this.getPlayerList()
    //获取任务分数
    this.getTaskScore()
  },
  methods: {
    // 获取任务分数
    getTaskScore() {
      getCourseChatperTask(this.courseId, this.taskId).then((res) => {
        if (res.code == 200) {
          this.score = res.data.taskScore
        }
      })
    },
    //获取选手列表
    getPlayerList() {
      getApprovalPlayerList(this.courseId, this.taskId, this.value).then(
        (res) => {
          if (res.code == 200) {
            this.tableData = res.data
          }
        }
      )
    },
    //按状态搜索查看参赛人员
    searchByType() {
      this.getPlayerList()
    },
    // 查看报告
    Approval(row) {
      let url = this.$router.resolve({
        path: '/ReportDetails',
        query: { matchNumber: row.matchApplyNumber, taskId: this.taskId },
      })
      window.open(url.href, '_bank')
    },
    // 归档下载
    downloadInfo() {},
    // 提交进度
    format1(percentage) {
      return percentage === 100 ? '满' : `50/60`
    },
    // 审批进度
    format2(percentage) {
      return percentage === 100 ? '满' : `45/50`
    },
  },
}
</script>
<style lang="scss">
.filter-wraper {
  .input-wraper {
    margin-top: 20px;
    .el-input__inner {
      width: 100%;
    }
  }
}
.el-tooltip__popper {
  max-width: 30%;
  line-height: 22px;
}
.chapter-info-table .el-switch__core {
  width: 28px;
  height: 16px;
}
.chapter-info-table .el-switch {
  margin-left: 15px;
}
.chapter-info-table .el-switch.is-checked .el-switch__core::after {
  margin-left: -13px;
}
.chapter-info-table .el-switch__core:after {
  width: 12px;
  height: 12px;
}
</style>
<style scoped>
.imgPost {
  vertical-align: inherit;
  position: absolute;
  right: 17px;
  color: rgb(2, 170, 255);
  font-size: 18px;
  padding-top: 5px;
}
.el-button--small:hover {
  color: #1277eb;
}
.el-tree >>> .el-tree-node {
  margin: 6px 0;
}
.el-form-item >>> .el-input__inner {
  width: 200px;
  height: 32px;
  border-radius: 4px;
}
.el-form >>> .el-textarea__inner {
  height: 200px;
  width: 350px;
  resize: none;
}
.el-form-item {
  margin-bottom: 22px;
}
.el-form-item >>> .el-form-item__content {
  height: auto;
}
.block::-webkit-scrollbar {
  width: 2px;
}
.block::-webkit-scrollbar-thumb {
  background: #dededd;
  border-radius: 50px;
}

.chapterTitle {
  width: 390px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.custom-tree-node {
  padding-top: 10px;
}
</style>
<style lang="scss" scoped>
@import './../../../styles/ypublic.scss';
.jx-content {
  width: 1200px;
  margin: 20px auto;
  .searh-select {
    .search-button {
      border: 1px solid #1277eb;
      height: 32px;
      width: 94px;
      text-align: center;
      vertical-align: middle;
      line-height: 30px;
      color: #1277eb;
      cursor: pointer;
      border-radius: 20px;
      padding: 0 16px;
      font-size: 14px;
      display: inline-block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0 15px 0 15px;
      &:hover {
        background-color: #1277eb;
        color: white;
      }
    }
  }
  .courseName {
    font-size: 18px;
  }
  .totalScore {
    margin-left: 30px;
    font-size: 15px;
  }
  #topic-models {
    padding: 200px 0;
    .button-center {
      text-align: center;
      .button-style {
        text-align: center;
        height: 48px;
        line-height: 48px;
        border-radius: 48px;
        padding: 0 106px;
        margin: 10px;
      }
    }
  }
  .navBox {
    .reportTemplate {
      padding-bottom: 10px;
      margin-left: 190px;
      cursor: pointer;
    }
    .testTemplate {
      padding-bottom: 10px;
      margin-left: 40px;
      cursor: pointer;
    }
    .templateCheck {
      border-bottom: 2px solid $yBlue;
      color: $yBlue;
      cursor: pointer;
    }
  }
  .block {
    margin: 20px 0;
    overflow-y: scroll;
    height: 483px;
  }
  .saveBtn {
    text-align: center;
    margin-top: 10px;
  }
}
</style>